<template>
    <div>
        <!-- mui 中  card.html 页面的案例 -->
        <!-- 商品轮播图区域 -->
        <!-- <h1>{{id}}</h1> -->
        <div class="mui-card">
          <div class="mui-card-content">
            <div class="mui-card-content-inner">
              <mt-swipe :auto="4000">
                <mt-swipe-item v-for="(itme,i) in goodsInfopic" :key="i"><img :src="itme.img_url"></mt-swipe-item>
              </mt-swipe>
            </div>
          </div>
			</div>

      <!-- 商品购买区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
			</div>

      <!-- 商品参数区域 -->
      <div class="mui-card">
				<div class="mui-card-header">页眉</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						包含页眉页脚的卡片，页眉常用来显示面板标题，页脚用来显示额外信息或支持的操作（比如点赞、评论等）
					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>

    </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      id:this.$route.params.id,
      goodsInfopic:[],
    }
  },
  created() {
    this.getGoodsInfoPic();
  },
  methods: {
    getGoodsInfoPic(){
      this.$http.get("../../localdata/goods.json").then(result=>{
        if (result.body) {
          var obj=result.body.filter(item=>{
            if (item.id==this.id) {
              return item;
            }
          })[0];
          this.goodsInfopic=obj.pic;
        } else {
          Toast("加载不到数据！！")
        }
      })
    }
  },
}
</script>


<style lang="scss" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;

  .now_price {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }

  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }

  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    z-index: 99;
    top: 390px;
    left: 146px;
  }
}
</style>
